<template>
    <fieldset>
        <legend>高级侦听器</legend>
        <button @click="handleClick">点击停止侦听</button>
    </fieldset>
</template>

<script setup>
import { ref,watchEffect } from "vue"

let msg = ref('无始大帝')
let msg2 = ref("人族圣体")
 setTimeout(()=>{
    msg.value = "斗战圣皇"
    // 停止侦听
    // stop()
 },1000)

//  setTimeout(()=>{
//     msg2.value="叶凡"
//  },2000)

// let stop = watchEffect(()=>{           //立即执行 不需传参 直接访问    
//     console.log('msg',msg.value);
//     console.log("msg2",msg2.value);
// })

// 停止侦听，再次调用 wactEffect的返回值
// 正常情况下 可组件卸载停止侦听，或者主动调用 watchEffect
let handleClick =()=>{
    stop()
}

// 失效函数 onInvalidate  它是里面的一个函数/方法

watchEffect((onInvalidate)=>{
    console.log(msg.value);
    onInvalidate(()=>{
        console.log("onInvalidate失效函数,再侦听器即将执行前触发");
    })
})

setTimeout(()=>{
    msg.value="神王姜太虚"
},2000)
</script>